<template>
  <div>
    <MkBillPanel ref='billPanelRef' printCode='InvRuKu' :bill="ctx.entity" id="billPanelRef">
      <template #button>
        <MkButtonQueryHistory @click="listRef.open()" />
        <MkButtonAdd @click="newEntity" :isEdit="ctx.isEdit" />
        <MkButtonSubmit @click="submit" :loading="ctx.loading" :isEdit="ctx.isEdit" />
        <MkButtonMore>
          <a-menu-item @click="billPanelRef.showCaoZuo()">操作记录</a-menu-item>
        </MkButtonMore>
        <MkButtonMore title="打印" icon="ele-Printer">
          <el-button v-print="{ id: 'billPanelRef' }" type="text">打印</el-button>
        </MkButtonMore>
        <el-button type="info" @click="XueYeChanPinEditPageRef.open()">新增血液产品</el-button>
      </template>
      <template #info>
        <MkForm :model='ctx.entity' ref='formRef' formId='InvShouGongRuKu' :col="3">
          <MkSelectBasEntity label='血液来源' v-model='ctx.entity.xueYeLaiYuanId' prop='xueYeLaiYuanId' :isEdit='ctx.isEdit'
            entity="BasXueYeLaiYuan" />
          <MkInput label='来源单号' v-model='ctx.entity.laiYuanDanHao' prop='laiYuanDanHao' :isEdit='ctx.isEdit' />
          <el-row>
            <MkSelectOrg label='入库院区' v-model='ctx.entity.ruKuYuanQuId' prop='ruKuYuanQuId' :isEdit='ctx.isEdit'
              scope="YuanQu" />
            <MkInput label='备注' v-model='ctx.entity.remark' prop='remark' :isEdit='ctx.isEdit' :col="2" />
          </el-row>
        </MkForm>
      </template>
      <div class="mingxi">
        <MkPanel title="新增" v-if="ctx.isEdit" style="width:300px">
          <template #header>
            <div class="title">
              <div>新增</div>
              <MkButtonAdd @click="addMingXi" :loading="ctx.loading">添加</MkButtonAdd>
            </div>
          </template>
          <MkScanInput @onEnter="getBarcode" placeholder="扫血袋" ref="scanRef" width="100%" />
          <p style="padding: 2px;"></p>
          <MkForm :model='ctx.mingXi' ref='formMingXiRef' formId='InvRuKuMingXi'>
            <MkInput label='献血码' v-model.trim='ctx.mingXi.xianXueMa' prop='xianXueMa' required :isEdit='ctx.isEdit' />
            <MkInput label='产品码' v-model.trim='ctx.mingXi.chanPinId' prop='chanPinId' required :isEdit='ctx.isEdit'
              @keyupEnter="changeChanPin" />
            <MkSelectBasEntity label='血液品种' v-model.trim='ctx.mingXi.pinZhongId' prop='pinZhongId' required
              :isEdit='false' entity="BasXueYePinZhong" />
            <MkInput label='血液名称' v-model.trim='ctx.mingXi.mingCheng' prop='mingCheng' required :isEdit='ctx.isEdit' />
            <MkSelectEnum label='ABO' v-model='ctx.mingXi.abo' prop='abo' required :isEdit='ctx.isEdit'
              :enumType="enumType.ABOKuCun" />
            <MkSelectEnum label='Rh(D)' v-model='ctx.mingXi.rhD' prop='rhD' required :isEdit='ctx.isEdit'
              :enumType="enumType.RhDKuCun" />
            <MkInputNumber label='容量' v-model='ctx.mingXi.rongLiang' prop='rongLiang' :isEdit='ctx.isEdit'>
              <template #suffix>
                <span>{{ ctx.mingXi.danWei }}</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label='价格' v-model.trim='ctx.mingXi.jiaGe' prop='jiaGe' required :isEdit='ctx.isEdit' />
            <MkFormDateTime label="失效时间" minWidth v-model='ctx.mingXi.shiXiaoShiJian' prop='shiXiaoShiJian' required
              :isEdit='ctx.isEdit' />
            <MkFormDateTime label="采血时间" minWidth v-model='ctx.mingXi.caiXueShiJian' prop='caiXueShiJian' required
              :isEdit='ctx.isEdit' />
            <MkSelectEdit label="血袋外观" prop="yiZhiShi" :isEdit='ctx.isEdit' v-model='ctx.mingXi.xueDaiWaiGuan' :col="2"
              :options="[{ title: '正常', canEdit: false, }, { title: '', canEdit: true, }]">
            </MkSelectEdit>
          </MkForm>
        </MkPanel>
        <MkTable :data="ctx.mingXiTable">
          <MkColumnIndex width="45px" />
          <MkColumnXueYe />
          <MkColumnBasEntity prop="pinZhongId" label="血液品种" entity="BasXueYePinZhong" />
          <MkColumnNumber prop="jiaGe" label="价格" width="80px" />
          <MkColumn prop="caiXueShiJian" label="采血时间" width="140px" />
          <MkColumn prop="xueDaiWaiGuan" label="血袋外观" />
          <MkColumnOption @show="showMingXi" :isMore="true" v-if="ctx.isEdit" @delete="deleteBlood" />
        </MkTable>
        <div style="padding-left: 5px;" class="no-print">
          <MkPanel title="汇总信息">
            <InvBloodSummary :bloodList="ctx.mingXiTable" :defaultShowXyzl="false" />
          </MkPanel>
        </div>
      </div>
    </MkBillPanel>

    <EditInv ref='editPageRef' @editInvMessage="editMingXi" />
    <ListPage ref='listRef' @load='loadEntity' />
    <XueYeChanPinEditPage ref='XueYeChanPinEditPageRef' />
  </div>
</template>

<script setup lang="ts" name="invShouGongRuKu">
/* 血液手工入库   ===== 功能全部特性 =====  已完成的功能在行前添加 - 同步到详细设计文档
选择容量后自动带出价格
打印功能,默认打印明细,具有打印汇总的功能
= 待定: 提交单据后可以单独修改单据主表信息 ( 来源血站, 来源单号, 备注等)
- 提交: 提交单据前需倒计时确认, 并提示: 血液入库后不能修改, 请确认
- 没有作废功能
- 产品码不存在时, 弹框快速创建产品码
- 默认入库院区为当前院区
- 集成汇总血液组件
- 关联上血液的大类和品种, 保存到库存表
- 血液已经存在检查, 存在则提示, 不允许入库( 已经存在的库存可能有使用记录, 不能随便修改 , 必须运维工程师后台删除后入库)
- 入库: 提交后, 库存表增加血液
- 集成通用单据操作记录功能
- 修改明细, 提交单据前可以修改血液明细, 提交单据后不能修改血液明细
- 扫码血袋, 自动填充血液信息, 包括: 血液码, 产品码, 血液名称, ABO, RhD, 容量, 单位, 价格, 制备时间, 失效时间
- 扫码后,血袋的所有信息收集完毕后,自动添加到明细表
*/
import ListPage from './list.vue'
import EditInv from './editInv.vue';
import { enumType } from '/@/const';
import XueYeChanPinEditPage from '/@/views/bas/basXueYeChanPin/edit.vue'

const XueYeChanPinEditPageRef = ref();

import {
  ctx,
  // Ref
  formMingXiRef, formRef, scanRef, listRef, billPanelRef, editPageRef,
  // 主表
  newEntity, loadEntity, submit,
  // 明细
  changeChanPin, addMingXi, showMingXi, editMingXi, deleteBlood,
  // 其他
  getBarcode, print, printALL
} from './index'



</script>

<style lang='scss' scoped>
.mingxi {
  display: flex;

  >div {
    height: 100%;
  }

  .title {
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between;
  }
}
</style>